---
type: integration
title: '@astrojs/netlify'
description: Aprende como usar el adaptador SSR @astrojs/netlify para desplegar tu proyecto Astro.
githubIntegrationURL: 'https://github.com/withastro/adapters/tree/main/packages/netlify/'
category: adapter
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Este adaptador permite a Astro desplegar tu sitio [renderizado en modo `hybrid` o `server`](/es/basics/rendering-modes/#renderizado-bajo-demanda) en [Netlify](https://www.netlify.com/).

Aprende como desplegar tu sitio Astro en nuestra [guía de despliegue en Netlify](/es/guides/deploy/netlify/).

## ¿Por qué Astro Netlify?

[Netlify](https://www.netlify.com/) es una plataforma de despliegue que te permite alojar tu sitio conectándolo directamente a tu repositorio de GitHub. Este adaptador mejora el proceso de construcción de Astro para preparar tu proyecto para el despliegue a través de Netlify.

## Instalación

Astro incluye un comando `astro add` para automatizar la configuración de integraciones oficiales. Si lo prefieres, puedes [instalar las integraciones manualmente](#instalación-manual) en su lugar.

Agrega el adaptador de Netlify para habilitar SSR en tu proyecto Astro con el comando `astro add`.
Esto instalará `@astrojs/netlify` y hará los cambios apropiados en tu archivo `astro.config.mjs` en un solo paso.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npx astro add netlify
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm astro add netlify
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn astro add netlify
  ```
  </Fragment>
</PackageManagerTabs>

### Instalación manual

Primero, instala el adaptador de Netlify en las dependencias de tu proyecto usando tu gestor de paquetes preferido:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install @astrojs/netlify
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add @astrojs/netlify
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add @astrojs/netlify
  ```
  </Fragment>
</PackageManagerTabs>

Luego, agrega el adaptador y tu modo de renderizado [bajo demanda](/es/basics/rendering-modes/#renderizado-bajo-demanda) deseado a tu archivo `astro.config.*`:

   ```js title="astro.config.mjs" ins={2, 6-7}
    import { defineConfig } from 'astro/config';
    import netlify from '@astrojs/netlify';

    export default defineConfig({
       // ...
       output: 'server',
       adapter: netlify(),
    });
   ```

## Uso

[Lee la guía completa de despliegue aquí.](/es/guides/deploy/netlify/)

Sigue las instrucciones para [construir tu sitio localmente](/es/guides/deploy/#construyendo-tu-proyecto-localmente). Después de construir, tendrás una carpeta `.netlify/` que contiene tanto [Funciones Netlify](https://docs.netlify.com/functions/overview/) en la carpeta `.netlify/functions-internal/` como [Funciones Netlify Edge](https://docs.netlify.com/edge-functions/overview/) en la carpeta `.netlify/edge-functions/`.

Para desplegar tu sitio, instala la [CLI de Netlify](https://docs.netlify.com/cli/get-started/) y ejecuta:

```sh
netlify deploy
```

El [artículo del blog de Netlify sobre Astro](https://www.netlify.com/blog/how-to-deploy-astro/) y la [documentación de Netlify](https://docs.netlify.com/integrations/frameworks/astro/) proporcionan más información sobre cómo usar esta integración para desplegar en Netlify.

### Acceder al contexto edge desde tu sitio

Las Funciones Edge de Netlify proporcionan un [objeto de contexto](https://docs.netlify.com/edge-functions/api/#netlify-specific-context-object) que incluye metadatos sobre la solicitud, como la IP de un usuario, datos de geolocalización y cookies.

Se puede acceder a través del objeto `Astro.locals.netlify.context`:

```astro
---
const {
  geo: { city },
} = Astro.locals.netlify.context;
---

<h1>Hola, amable visitante de {city}!</h1>
```

Si estás usando TypeScript, puedes obtener tipos adecuados actualizando `src/env.d.ts` para usar `NetlifyLocals`:

```ts title="src/env.d.ts"
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

type NetlifyLocals = import('@astrojs/netlify').NetlifyLocals

declare namespace App {
  interface Locals extends NetlifyLocals {
    // ...
  }
}
```

Esto no está disponible en las páginas prerenderizadas.

### Ejecutar el middleware de Astro con Funciones Edge de Netlify

Cualquier middleware de Astro se aplica a las páginas prerenderizadas en tiempo de construcción y a las páginas renderizadas bajo demanda en tiempo de ejecución. Si estás usando el adaptador de Netlify Edge, puedes ejecutar el middleware de Astro en las Funciones Edge de Netlify para que se aplique a las páginas prerenderizadas y renderizadas bajo demanda.

Para implementar redirecciones, control de acceso o encabezados de respuesta personalizados para las páginas prerenderizadas, ejecuta tu middleware en las Funciones Edge de Netlify habilitando [la opción `edgeMiddleware`](/es/reference/adapter-reference/#edgemiddleware):

```js title="astro.config.mjs" ins={8}
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify';

export default defineConfig({
  // ...
  output: 'server',
  adapter: netlify({
   edgeMiddleware: true,
  }),
});
```

Cuando `edgeMiddleware` está habilitado, una función edge ejecutará tu código de middleware para todas las solicitudes, incluyendo activos estáticos, páginas prerenderizadas y páginas renderizadas bajo demanda.

Para las páginas renderizadas bajo demanda, el objeto `context.locals` se serializa usando JSON y se envía en un encabezado para la función sin servidor, que realiza la renderización. Como medida de seguridad, la función sin servidor se negará a servir solicitudes con una respuesta `403 Forbidden` a menos que provengan de la función edge generada.

### Soporte para Netlify Image CDN

Este adaptador por defecto utiliza el [CDN de imágenes de Netlify](https://docs.netlify.com/image-cdn/) para transformar imágenes sobre la marcha sin afectar a los tiempos de construcción.
Es implementado usando un [Servicio de Imágenes Astro](/es/reference/image-service-reference/) bajo el capó.

Para optar por no utilizar la optimización de imágenes remotas de Netlify, usa la opción `imageCDN`:

```js title="astro.config.mjs" ins={8}
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify';

export default defineConfig({
  // ...
  output: 'server',
  adapter: netlify({
    imageCDN: false,
  }),
});
```


Si estás usando imagenes alojadas en otro dominio, debes autorizar los patrones de dominio o URL usando las opciones de configuración [`image.domains`](/es/reference/configuration-reference/#imagedomains) o [`image.remotePatterns`](/es/reference/configuration-reference/#imageremotepatterns):

```js title="astro.config.mjs" ins={8-10}
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify';

export default defineConfig({
    // ...
    output: 'server',
    adapter: netlify(),
    image: {
      domains: ['example.com'],
    },
});
```

Para más información, consulta [la guía para autorizar imagenes remotas](/es/guides/images/#autorizando-imágenes-remotas). Esto no es requerido para imagenes alojadas en el mismo dominio que tu sitio.

### Sitios estáticos con el adaptador de Netlify

Para sitios estáticos (`output: 'static'`) alojados en Netlify, normalmente no se necesita un adaptador. Sin embargo, algunas características de despliegue solo están disponibles a través de un adaptador.

Los sitios estáticos necesitarán instalar este adaptador para utilizar y configurar el [servicio de imágenes](#soporte-para-netlify-image-cdn) de Netlify.

Si utilizas la configuración de `redirects` en tu archivo de configuración de Astro, puedes utilizar el adaptador de Netlify para traducirlo al formato adecuado de `_redirects`.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify/static';
export default defineConfig({
  // ...
  adapter: netlify(),
  redirects: {
    '/blog/old-post': '/blog/new-post',
  },
});
```

Una vez que ejecutes `astro build`, se generará un archivo `dist/_redirects`. Netlify utilizará ese archivo para enrutamiento adecuado de las páginas en producción.

:::note
Todavía puedes incluir un archivo `public/_redirects` para redirecciones manuales. Cualquier redirección que especifiques en la configuración de redirecciones se añadirá al final de las redirecciones que hayas definido tú mismo.
:::

### Caché de páginas

Las páginas renderizadas bajo demanda sin ningún contenido dinámico pueden ser almacenadas en caché para mejorar el rendimiento y reducir el uso de recursos.
Habilitar la opción `cacheOnDemandPages` en el adaptador almacenará en caché todas las páginas renderizadas bajo demanda durante un año:

```ts title="astro.config.mjs"
export default defineConfig({
  // ...
  output: 'server',
  adapter: netlify({
    cacheOnDemandPages: true,
  }),
});
```

Esto se puede cambiar en cada página agregando encabezados de caché a tu respuesta:

```astro title="pages/index.astro"
---
import Layout from '../components/Layout.astro';

Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=45, must-revalidate');
---

<Layout title="Astro on Netlify">
  {new Date()}
</Layout>
```

Con [control de caché de granularidad fina](https://www.netlify.com/blog/swr-and-fine-grained-cache-control/), Netlify soporta
encabdezados de caché estándar como `CDN-Cache-Control` o `Vary`.

Refiérete a la documentación para aprender a implementar, por ejemplo, el tiempo de vida (TTL) o el almacenamiento en caché obsoleto mientras se vuelve a validar (SWR): https://docs.netlify.com/platform/caching

## Ejemplos

* La [plantilla de inicio de Astro Netlify Edge](https://github.com/sarahetter/astro-netlify-edge-starter) proporciona un ejemplo y una guía en el archivo README.

* ¡[Explora proyectos de Astro Netlify en GitHub](https://github.com/search?q=path%3A**%2Fastro.config.mjs+%40astrojs%2Fnetlify\&type=code) para más ejemplos!

[astro-integration]: /es/guides/integrations-guide/
